<div>
  <%= form_with url: local_onboarding_index_path, method: :post, class: "space-y-8" do |form| %>
    <%= render(FormFieldComponent.new(
      label: "Account Details",
      description: "The name of your team, organization or account."
    )) do %>
      <div class="form-group">
        <%= form.label :account_name, "Organization Name" %>
        <%= form.text_field(
          :account_name,
          placeholder: "My Organization",
          name: "account[name]",
          class: "input input-bordered w-full",
          required: true,
        ) %>
      </div>
    <% end %>

    <%= render(FormFieldComponent.new(
      label: "Admin User",
      description: "Create the first admin user for this account. (You can configure SSO later.)"
    )) do %>
      <div class="form-group">
        <%= form.label :email, "Email" %>
        <%= form.email_field(
          :email,
          placeholder: "admin@example.com",
          name: "user[email]",
          class: "input input-bordered w-full",
          required: true,
        ) %>
      </div>
      <div class="form-group" data-controller="toggle-password">
        <%= form.label :password, "Password" %>
        <div class="flex items-center">
          <%= form.password_field(
            :password,
            placeholder: "Enter your password",
            name: "user[password]",
            class: "input input-bordered w-full",
            required: true,
            data: { toggle_password_target: "input" },
          ) %>
          <button type="button" class="btn btn-outline" data-action="toggle-password#toggle">
            <iconify-icon data-toggle-password-target="icon" icon="mdi:eye"></iconify-icon>
          </button>
        </div>
      </div>
    <% end %>

    <%= render(FormFieldComponent.new(
      label: "Portainer Configuration",
      description: "Configure your Portainer instance URL and access token."
    )) do %>
      <%= render "accounts/stack_managers/url", form: form %>

      <div class="mt-4">
        <div data-controller="expandable-optional-input">
          <div>
            <a data-action="expandable-optional-input#show" class="btn btn-ghost">
              + Add personal access token
            </a>
          </div>
          <div data-expandable-optional-input-target="container">
            <div class="form-group">
              <%= form.label :personal_access_token, "Personal Access Token" %>
              <%= form.text_field(
                :personal_access_token,
                name: "user[personal_access_token]",
                placeholder: "Enter your personal access token",
                class: "input input-bordered w-full",
              ) %>
            </div>
          </div>
        </div>
        <div class="label">
          <span class="label-text-alt text-gray-500">
            If not provided, the account's access token will be used for your Portainer access.
          </span>
        </div>
      </div>
    <% end %>

    <div class="form-footer">
      <%= form.submit "Save", class: "btn btn-primary" %>
    </div>
  <% end %>
</div>